<!-- 楼层管理(超级管理员) -->
<template>
  <div class="super-container">
    <FloorPage ref="floorPageDomRef">
      <template #default="{ data }">
        <el-button
          type="primary"
          @click="AddOrModify(data.Cleaning, data.id, data.Dormitory.id)"
          >{{ data.Cleaning ? "修改" : "添加" }}</el-button
        >
        <el-button
          type="danger"
          v-if="data.Cleaning"
          @click="headleQuit(data.Cleaning, data.id,data.Dormitory.id)"
          >退出</el-button
        >
      </template>
    </FloorPage>

    <el-dialog
      v-model="dialogTableVisibleRef"
      :title="dialogTitleRef"
      width="500"
    >
      <updateBox
        @click="headleMaskSelBox"
        v-if="isUpdataOrAddRef"
        :avatar="UpdataBoxDataRef.avatar"
        :dataArr="UpdataBoxDataRef.dataArr"
        :MaskSleSelectData="MaskSelSelectRef"
      ></updateBox>
      <AddBox
        @click="headleMaskSelBox"
        :MaskSleSelectData="MaskSelSelectRef"
        v-else
      ></AddBox>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="headleSumbit(dialogButRef.id)">
            {{ dialogButRef.text }}
          </el-button>
          <el-button @click="dialogTableVisibleRef = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <MaskSelBox
      v-if="isMaskSelBoxRef"
      :maskSelBox="MaskSelBoxDataRef"
      @closeMaskSel="isMaskSelBoxRef = false"
      @MaskSelSelect="MaskSelSelect"
    >
      <el-pagination
        v-model:current-page="pageRef"
        v-model:page-size="limitRef"
        :background="true"
        layout="total, prev, pager, next"
        :total="paginationCountRef"
        @current-change="currentChange"
      />
    </MaskSelBox>
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref } from "vue";
import FloorPage from "../components/FloorPage.vue";
import {
  getCleaning,
  allCleaning,
  updateFCleaning,
  quitFloorCleaning,
} from "@/api/cleaning.js";
const dialogTableVisibleRef = ref(false); // dialog显示隐藏
const dialogTitleRef = ref(""); // dialog标题
const dialogButRef = ref(""); // dialog按钮
const isUpdataOrAddRef = ref(false); // 出现哪个组件
const isMaskSelBoxRef = ref(false); // 是否打开遮罩层
const selectedIdRef = ref(); // 原有的保洁人员id
const UpdataBoxDataRef = ref({
  avatar: "",
  dataArr: [
    {
      label: "姓名",
      text: "",
      attribute: "cleaningName",
    },
    {
      label: "学工号",
      text: "",
      attribute: "cleaningNumber",
    },
    {
      label: "手机号",
      text: "",
      attribute: "cleaningPhone",
    },
  ],
});
const MaskSelBox = defineAsyncComponent(() =>
  import("@/components/MaskSelBox/index.vue")
);
const updateBox = defineAsyncComponent(() =>
  import("@/components/UpdateBox/index.vue")
);
const AddBox = defineAsyncComponent(() =>
  import("@/components/AddBox/index.vue")
);
const MaskSelBoxDataRef = ref([]); // 遮罩层数据
const paginationCountRef = ref(); // 分页总数
const pageRef = ref(1); // 当前页数
const limitRef = ref(10); // 每页条数
const MaskSelSelectRef = ref(""); //遮罩层选中的数据
const floorIdRef = ref(); // 楼层id
const floorPageDomRef = ref(); // floorPage的Dom
const DormitoryIdRef = ref(); // 宿舍楼id
// 添加或修改
const AddOrModify = (data, floorId, DormitoryId) => {
  DormitoryIdRef.value = DormitoryId;
  floorIdRef.value = floorId;
  dialogButRef.value = "";
  MaskSelSelectRef.value = "";
  MaskSelBoxDataRef.value = [];
  dialogTableVisibleRef.value = true;
  selectedIdRef.value = "";
  if (data) {
    dialogTitleRef.value = "修改保洁人员";
    isUpdataOrAddRef.value = true;
    UpdataBoxDataRef.value.avatar = data.avatar;
    for (const item of UpdataBoxDataRef.value.dataArr) {
      item.text = data[item.attribute];
    }
    selectedIdRef.value = data.id;
    dialogButRef.value = {
      id: 1,
      text: "修改",
    };
  } else {
    dialogTitleRef.value = "添加保洁人员";
    isUpdataOrAddRef.value = false;
    dialogButRef.value = {
      id: 0,
      text: "添加",
    };
  }
};
// 获取保洁人员的信息
const getCleaningInfo = async () => {
  const { data } = await getCleaning({
    page: pageRef.value,
    limit: limitRef.value,
    cleaningNumber: null,
    cleaningNamem: null,
    isRegion: null,
  });
  paginationCountRef.value = data.total;
  MaskSelBoxDataRef.value = data.rows
    .filter((item) => item.id !== selectedIdRef.value || !selectedIdRef.value)
    .map((it) => {
      return {
        id: it.id,
        value: [
          {
            label: "头像",
            text: it.cleaningavatar,
            attribute: "avatar",
          },
          {
            label: "姓名",
            text: it.cleaningName,
            attribute: "cleaningName",
          },
          {
            label: "学工号",
            text: it.cleaningNumber,
            attribute: "cleaningNumber",
          },
          {
            label: "学工号",
            text: it.cleaningPhone,
            attribute: "cleaningPhone",
          },
        ],
      };
    });
};
// 打开遮罩层
const headleMaskSelBox = async () => {
  isMaskSelBoxRef.value = true;
  await getCleaningInfo();
};
// 当前页面改变
const currentChange = async (value) => {
  await getCleaningInfo();
};
// 遮罩层选中
const MaskSelSelect = (data) => {
  isMaskSelBoxRef.value = false;
  MaskSelSelectRef.value = data;
};
const headleSumbit = async (id) => {
  if (!MaskSelSelectRef.value) {
    ElMessage.error("请选择保洁人员");
    return;
  }

  if (id) {
    const { data } = await updateFCleaning({
      floorId: floorIdRef.value,
      oldCleaningId: selectedIdRef.value,
      newCleaningId: MaskSelSelectRef.value.id,
    });

    if (data) {
      ElMessage({
        message: "修改成功",
        type: "success",
      });
    }
  } else {
    const { data } = await allCleaning({
      floorId: floorIdRef.value,
      cleaningId: MaskSelSelectRef.value.id,
    });
    if (data) {
      ElMessage({
        message: "分配成功",
        type: "success",
      });
    }
  }
  await floorPageDomRef.value.getDormitoryId(DormitoryIdRef.value);
  dialogTableVisibleRef.value = false;
};
// 退出
const headleQuit = async (cleaning, floorId,DormitoryId) => {
  ElMessageBox.confirm("确定退出吗", {
    confirmButtonText: "确定",
    cancelButtonText: "关闭",
    type: "warning",
  }).then(async () => {
    const { data } = await quitFloorCleaning({
      floorId,
      cleaningId: cleaning.id,
    });
    if (data) {
      ElMessage({
        type: "success",
        message: "退出成功",
      });

      await floorPageDomRef.value.getDormitoryId(DormitoryId);
    }
  });
  
};
</script>
<style lang="less" scoped>
.super-container {
   
  width: 100%;
}
</style>